
<template>
  <div class="h-full flex flex-col bg-wechat-bg">
    <!-- 导航栏 -->
    <div class="nav-bar h-12 flex items-center justify-center px-4">
      <h1 class="text-lg font-semibold">我</h1>
    </div>

    <!-- 个人信息 -->
    <div class="bg-white mb-2">
      <div class="flex items-center p-4" @click="openQRCode">
        <img 
          :src="user.avatar" 
          :alt="user.nickname"
          class="w-12 h-12 rounded"
        >
        <div class="flex-1 ml-3">
          <h3 class="font-medium text-gray-900">{{ user.nickname }}</h3>
          <p class="text-sm text-gray-600">微信号: {{ user.username }}</p>
        </div>
        <div class="flex items-center">
          <i class="fas fa-qrcode text-gray-400 text-xl mr-2"></i>
          <i class="fas fa-chevron-right text-gray-400 text-sm"></i>
        </div>
      </div>
    </div>

    <!-- 功能列表 -->
    <div class="bg-white mb-2">
      <div class="flex items-center p-4 border-b border-gray-100">
        <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
          <i class="fas fa-wallet text-white text-sm"></i>
        </div>
        <span class="ml-3 text-gray-900">支付</span>
        <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
      </div>
      
      <div class="flex items-center p-4">
        <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
          <i class="fas fa-cog text-white text-sm"></i>
        </div>
        <span class="ml-3 text-gray-900">设置</span>
        <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
      </div>
    </div>

    <div class="bg-white mb-2">
      <div class="flex items-center p-4 border-b border-gray-100">
        <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
          <i class="fas fa-star text-white text-sm"></i>
        </div>
        <span class="ml-3 text-gray-900">收藏</span>
        <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
      </div>
      
      <div class="flex items-center p-4 border-b border-gray-100">
        <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
          <i class="fas fa-image text-white text-sm"></i>
        </div>
        <span class="ml-3 text-gray-900">相册</span>
        <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
      </div>
      
      <div class="flex items-center p-4 border-b border-gray-100">
        <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
          <i class="fas fa-card text-white text-sm"></i>
        </div>
        <span class="ml-3 text-gray-900">卡包</span>
        <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
      </div>
      
      <div class="flex items-center p-4">
        <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
          <i class="fas fa-smile text-white text-sm"></i>
        </div>
        <span class="ml-3 text-gray-900">表情</span>
        <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
      </div>
    </div>

    <!-- 底部导航 -->
    <TabBar />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import TabBar from '@/components/common/TabBar.vue'

const router = useRouter()
const userStore = useUserStore()

const user = userStore.user

const openQRCode = () => {
  router.push('/qrcode')
}
</script>
